<template>
  <div>
    <el-drawer
      :with-header="false"
      size="75%"
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
    >
      <div style="padding: 24px 24px 30px 24px">
        <el-descriptions direction="vertical" style="margin-bottom: 12px" :column="5" size="medium">
          <template slot="title">
            <div style="line-height: 35px;display: inline-block;height: 35px">{{ data.customerName }}</div>
          </template>
          <template slot="extra">
            <el-button type="warning" size="small" @click="updateHandler(data.id)">
              <i class="el-icon-edit"> 编辑</i>
            </el-button>
            <el-button type="danger" size="small" @click="detailStatusVisible = true">
              <i class="el-icon-delete"> 更改成交状态</i>
            </el-button>
            <el-dropdown style="margin-left: 12px">
              <el-button size="small">
                <i class="el-icon-more"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeOwnerVisible = true">
                  <i class="el-icon-user"> 转移</i>
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="el-icon-sell"> 退回</i>
                </el-dropdown-item>
                <el-dropdown-item @click.native="lock(1)">
                  <i class="el-icon-sold-out"> 锁定</i>
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="el-icon-sold-out"> 解锁</i>
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleDelete(data.id)">
                  <i class="el-icon-sold-out"> 删除</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-descriptions-item label="客户级别">
            <dict-tag :options="dict.type.crm_customer_level" :value="data.levelId"/>
          </el-descriptions-item>
          <el-descriptions-item label="成交状态">
            <dict-tag :options="dict.type.crm_customer_deal_status" :value="data.dealStatus"/>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
          <el-descriptions-item label="首要联系人">{{ data.contactsName }}</el-descriptions-item>
          <el-descriptions-item label="首要联系人电话">{{ data.contactsName }}</el-descriptions-item>
        </el-descriptions>
        <el-scrollbar style="height: calc(100vh - 225px);">
          <el-tabs v-model="activeName" @tab-click="tabClick">
<!--            <el-tab-pane label="活动" name="activity">-->
<!--              <comment></comment>-->
<!--            </el-tab-pane>-->
            <el-tab-pane label="详细资料" name="detailInfo">
              <el-descriptions title="基本信息" :column="2">
                <el-descriptions-item label="客户姓名">{{ data.customerName }}</el-descriptions-item>
                <el-descriptions-item label="客户来源">
                  <dict-tag :options="dict.type.crm_source_name" :value="data.sourceId"/>
                </el-descriptions-item>
                <el-descriptions-item label="手机">{{ data.mobile }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{ data.telephone }}</el-descriptions-item>
                <el-descriptions-item label="网址">{{ data.website }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ data.email }}</el-descriptions-item>
                <el-descriptions-item label="客户行业">
                  <dict-tag :options="dict.type.crm_customer_industry" :value="data.industryId"/>
                </el-descriptions-item>
                <el-descriptions-item label="客户级别">
                  <dict-tag :options="dict.type.crm_customer_level" :value="data.levelId"/>
                </el-descriptions-item>
                <el-descriptions-item label="下次联系时间">{{ data.nextTime }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ data.remark }}</el-descriptions-item>
                <el-descriptions-item label="地区定位">{{ data.location }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="系统信息" :column="2" style="margin-top: 20px">
                <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ data.createUserName }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
                <el-descriptions-item label="负责人获取客户时间">{{ data.receiveTime }}</el-descriptions-item>
                <el-descriptions-item label="所属部门">苏州市</el-descriptions-item>
                <el-descriptions-item label="最后跟进记录">{{ data.lastTime }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="联系人" name="contacts">
              <contacts-drawer-table @setPrimaryContact="setPrimaryContacts" @addContacts="addContacts"
                                     :contacts-data="drawerTableData" v-if="activeName == 'contacts'"
                                     :loading="drawerTableLoading"
              ></contacts-drawer-table>
            </el-tab-pane>
            <el-tab-pane label="商机" name="business">
              <business-drawer-table :business-data="drawerTableData" @add-business="addBusiness"
                                     v-if="activeName == 'business'"
                                     :loading="drawerTableLoading"
              ></business-drawer-table>
            </el-tab-pane>
            <el-tab-pane label="合同" name="contract">
              <contract-drawer-table :contract-data="drawerTableData" @add-contract="addContract"
                                     v-if="activeName == 'contract'"
                                     :loading="drawerTableLoading"
              ></contract-drawer-table>
            </el-tab-pane>
            <el-tab-pane label="回款" name="receivables">
              <receivables-drawer-table :table-data="drawerTableData" v-if="activeName == 'receivables'"
                                        :loading="drawerTableLoading"
              />
              <receivables-plan-drawer-table :table-data="drawerTableDataOther" style="margin-top: 30px"
                                             v-if="activeName == 'receivables'"
                                             :loading="drawerTableLoading"
              />
            </el-tab-pane>
<!--            <el-tab-pane label="回访" name="returnVisit">-->
<!--              <return-visit-drawer-table :table-data="drawerTableData" v-if="activeName == 'returnVisit'"-->
<!--                                         :loading="drawerTableLoading"-->
<!--              />-->
<!--            </el-tab-pane>-->
            <el-tab-pane label="发票" name="invoice">
              <invoice-info-drawer-table :table-data="drawerTableData" v-if="activeName == 'invoice'"
                                         :loading="drawerTableLoading"
              />
              <invoice-drawer-table :table-data="drawerTableDataOther" v-if="activeName == 'invoice'"
                                    style="margin-top: 30px" :loading="drawerTableLoading"
              />
            </el-tab-pane>
            <el-tab-pane label="附件" name="file">
              <file-drawer-table :file-list="drawerTableData" v-if="activeName == 'file'" :loading="drawerTableLoading"
              ></file-drawer-table>
            </el-tab-pane>
            <el-tab-pane label="操作记录" name="records">
              <crm-records :activity-list="drawerTableData" v-if="activeName =='records'"/>
            </el-tab-pane>
          </el-tabs>
        </el-scrollbar>
      </div>
    </el-drawer>
    <!-- 对话框 -->
    <customer-create :visible.sync="customerDialogVisible" :pk="pk"/>
    <!-- 更改成交状态对话框 -->
    <detail-status :detail-status="data.detailStatus" :visible.sync="detailStatusVisible" @ok="detailStatus"/>
    <!-- 转移负责人对话框 -->
    <change-owner-popover :dialog-visible.sync="changeOwnerVisible" @></change-owner-popover>
    <!-- 退回公海池 -->
    <send-back :visible.sync="sendBackVisible"></send-back>
  </div>
</template>

<script>
import {
  deleteBatchByIds,
  listBusinessFromCustomer,
  listContactsFromCustomer,
  listContractFromCustomer,
  listInvoiceFromCustomer,
  listInvoiceInfoFromCustomer,
  listReceivablesFromCustomer,
  listReceivablesPlanFromCustomer,
  selectByPrimaryKey,
  updateDealStatus
} from '@/api/crm/Customer'
import { listActionRecord } from '@/api/crm/ActionRecord'

import Comment from '@/components/CrmEdit/Index'
import SendBack from '@/components/Crm/SelectPool/SendBack'
import ChangeOwnerPopover from '@/components/Crm/ChangeOwnerPopover/Customer'
import ContactsDrawerTable from '@/components/Crm/Contacts/DrawerTable'
import BusinessDrawerTable from '@/components/Crm/Business/DrawerTable'
import ContractDrawerTable from '@/components/Crm/Contract/DrawerTable'
import FileDrawerTable from '@/components/Crm/File/DrawerTable'
import ReceivablesDrawerTable from '@/components/Crm/Receivables/DrawerTable'
import ReceivablesPlanDrawerTable from '@/components/Crm/ReceivablesPlan/DrawerTable'
import ReturnVisitDrawerTable from '@/components/Crm/ReturnVisit/DrawerTable'
import InvoiceInfoDrawerTable from '@/components/Crm/InvoiceInfo/DrawerTable'
import InvoiceDrawerTable from '@/components/Crm/Invoice/DrawerTable'
import CustomerCreate from './Create'
import DetailStatus from '@/components/Crm/DetailStatus/Index'
import Axios from 'axios'
import CrmRecords from '@/components/CrmRecords/Index'

export default {
  inheritAttrs: false,
  name: 'CustomerDetail',
  dicts: ['crm_customer_level', 'crm_customer_deal_status', 'crm_source_name', 'crm_customer_industry', 'sys_crm_status'],
  components: {
    DetailStatus,
    CustomerCreate,
    ContractDrawerTable,
    BusinessDrawerTable,
    ContactsDrawerTable,
    ChangeOwnerPopover,
    FileDrawerTable,
    ReceivablesDrawerTable,
    ReceivablesPlanDrawerTable,
    ReturnVisitDrawerTable,
    InvoiceInfoDrawerTable,
    InvoiceDrawerTable,
    SendBack,
    Comment,
    CrmRecords
  },
  props: {
    pk: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      sendBackVisible: false, // 退回公海池显示
      changeOwnerVisible: false, // 负责人变更显示
      detailStatusVisible: false, // 成交状态显示
      customerDialogVisible: false, // 客户对话框显示
      drawerTableData: [], // 表格数据
      drawerTableDataOther: [], // 其他表格数据
      drawerTableLoading: false, // 表格加载动画
      activeName: 'detailInfo', // 标签页标志
      data: {}, // 对象数据
      queryParams: {
        page: 1,
        limit: 15,
        search: '',
        searchId: null
      } // 查询对象
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    // 打开抽屉
    onOpen() {
      if (this.pk != null) {
        selectByPrimaryKey(this.pk).then(res => {
          this.data = res.data
        })
      }
    },
    // 文件移除处理
    fileRemoveHandler() {

    },
    // 文件下载处理
    fileDownloadHandler() {

    },
    // 设置首要联系人
    setPrimaryContacts(id) {
      console.log('首要联系人', id)
    },
    // 添加联系人
    addContacts() {
      console.log('添加联系人')
    },
    // 添加商机
    addBusiness() {
      console.log('添加商机')
    },
    // 添加合同
    addContract() {
      console.log('添加合同')
    },
    // 修改
    updateHandler() {
      this.customerDialogVisible = true
    },
    // 标签页切换
    tabClick({ name }) {
      // 重置数据
      this.queryParams.searchId = this.data.id
      this.drawerTableLoading = true
      this.drawerTableData = []
      this.drawerTableDataOther = []
      if (name == 'contacts') {
        // 查询客户关联联系人
        listContactsFromCustomer(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'business') {
        // 查询客户关联商机
        listBusinessFromCustomer(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'contract') {
        // 查询客户关联合同
        listContractFromCustomer(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'receivables') {
        // 查询客户关联回款
        Axios.all([listReceivablesPlanFromCustomer(this.queryParams), listReceivablesFromCustomer(this.queryParams)])
          .then(Axios.spread((receivablesPlanRes, receivablesRes) => {
            this.drawerTableDataOther = receivablesPlanRes.data.records
            this.drawerTableData = receivablesRes.data.records
            console.log('回款', this.drawerTableData)
            console.log('回款计划', this.drawerTableDataOther)
            this.drawerTableLoading = false
          })).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'returnVisit') {
        // 查询客户关联回访
        this.drawerTableLoading = false
      } else if (name == 'invoice') {
        // 查询客户关联发票
        Axios.all(listInvoiceInfoFromCustomer(this.queryParams), listInvoiceFromCustomer(this.queryParams))
          .then(Axios.spread((invoiceInfoRes, invoiceRes) => {
            this.drawerTableData = invoiceInfoRes.data.records
            this.drawerTableDataOther = invoiceRes.data.records
            this.drawerTableLoading = false
          })).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'file') {
        // 查询客户关联附件
        this.drawerTableLoading = false
      } else if (name == 'records') {
        listActionRecord(2, this.data.id).then(res => {
          this.drawerTableData = res.data
        })
      }
    },
    // 修改客户成交状态
    detailStatus(detailStatus) {
      updateDealStatus(this.data.id, detailStatus).then(res => {
        this.onOpen(this.data.id)
      })
    },
    // 删除按钮点击事件
    handleDelete(id) {
      this.$modal.confirm('确认删除所选中数据?').then(() => {
        deleteBatchByIds(id)
      }).then(() => {
        this.$emit('ok')
        this.onClose()
        this.$modal.msgSuccess('移除成功')
      }).catch(() => {
      })
    },
    // 上锁或解锁
    lock(status) {

    },
    // 关闭回调
    onClose() {
      this.activeName = 'detailInfo'
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>
